<template>
	<view class="volunteer-form contentFoot" style="user-select: text;">
		<sunMenu></sunMenu>
		<view class="form-container-container">
			<view class="form-container">
				<u-parse :content="content" class="parse"></u-parse>
				<view style="height: 50rpx;"></view>
				<view class="form-wrapper">
					<u-form :model="formData" ref="form" :rules="rules" :labelWidth="120" labelPosition="left">
						<u-form-item label="姓名" prop="name">
							<u-input v-model="formData.name" placeholder="請輸入姓名"></u-input>
						</u-form-item>

						<u-form-item label="身份證字號" prop="idCard">
							<u-input v-model="formData.idCard" placeholder="請輸入身份證字號"></u-input>
						</u-form-item>

						<u-form-item label="出生年月日" prop="birthday" @click="showPicker=!showPicker">
							<u--input v-model="formData.birthday" disabled disabledColor="#ffffff" placeholder="請選擇時間"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

						<u-form-item label="行動電話" prop="tel">
							<u-input v-model="formData.tel" placeholder="請輸入行動電話"></u-input>
						</u-form-item>

						<u-form-item label="聯絡地址" prop="address">
							<u-input v-model="formData.address" type="textarea" placeholder="請輸入聯絡地址"></u-input>
						</u-form-item>

						<u-form-item label="電子郵件" prop="emali">
							<u-input v-model="formData.emali" placeholder="請輸入電子郵件"></u-input>
						</u-form-item>


						<u-form-item label="緊急聯絡人" prop="emergencyContact">
							<u-input v-model="formData.emergencyContact" placeholder="請輸入緊急聯絡人姓名"></u-input>
						</u-form-item>

						<u-form-item label="與緊急聯絡人關係" prop="emergencyRelationship">
							<u-input v-model="formData.emergencyRelationship" placeholder="請輸入與緊急聯絡人的關係"></u-input>
						</u-form-item>

						<u-form-item label="緊急聯絡人電話" prop="emergencyTel">
							<u-input v-model="formData.emergencyTel" placeholder="請輸入緊急聯絡人電話"></u-input>
						</u-form-item>

						<u-form-item label="志工類別" prop="volunteerType">
							<u-radio-group v-model="formData.volunteerType">
								<u-radio name="馬拉松活動志工" class="radio-item">馬拉松活動志工</u-radio>
								<u-radio name="公益活動志工" class="radio-item">公益活動志工</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label="飲食習慣" prop="eatingHabits">
							<u-radio-group v-model="formData.eatingHabits">
								<u-radio name="葷" class="radio-item">葷食</u-radio>
								<u-radio name="素" class="radio-item">素食</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label="衣服尺寸" prop="clothingSize">
							<u-radio-group v-model="formData.clothingSize">
								<u-radio name="s" class="radio-item">S</u-radio>
								<u-radio name="m" class="radio-item">M</u-radio>
								<u-radio name="l" class="radio-item">L</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label="是否有參加過其他馬拉松志工經驗" prop="isOther">
							<u-radio-group v-model="formData.isOther">
								<u-radio name="是">是</u-radio>
								<u-radio name="否">否</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label="參加志工經歷描述" prop="workDesc" v-if="formData.isOther=='是'">
							<u-input type="textarea" v-model="formData.workDesc" placeholder="請描述"></u-input>
						</u-form-item>
						<u-form-item label="參加志工經歷年份" prop="workTime" v-if="formData.isOther=='是'"
							@click="showworkPicker=!showworkPicker">
							<u--input v-model="formData.workTime" disabled disabledColor="#ffffff" placeholder="請選擇時間"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="參加志工經歷名稱" prop="workName" v-if="formData.isOther=='是'">
							<u-input type="textarea" v-model="formData.workName" placeholder="請描述"></u-input>
						</u-form-item>

						<view class="submit-btn">
							<u-button type="primary" @click="submitForm">提交申請</u-button>
						</view>
					</u-form>
				</view>
			</view>
		</view>
		<view style="height: 32rpx;"></view>

		<u-datetime-picker :show="showPicker" v-model="value1" mode="date" @cancel="closePick" @confirm="confirmPick"
			:max-date="maxDate" :minDate="-936293152000"></u-datetime-picker>

		<u-datetime-picker :show="showworkPicker" v-model="value1" mode="date" @cancel="closePick"
			@confirm="confirmworkPick" :max-date="maxDate" :minDate="-936293152000"></u-datetime-picker>

		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>

		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import sunMenu from '../../components/sun-menu/sun-menu.vue'
	import {
		getInformation,
		addVolunteer
	} from '@/api/api.js'
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				content: '',
				value1: Number(new Date()),
				showPicker: false,
				showworkPicker: false,
				maxDate: Number(new Date()),
				query: {
					noticeType: ''
				},
				formData: {
					name: '',
					idCard: '',
					birthday: '',
					tel: '',
					address: '',
					emali: '',
					emergencyContact: '',
					emergencyRelationship: '',
					emergencyTel: '',
					eatingHabits: '葷',
					volunteerType: '馬拉松活動志工',
					clothingSize: 's',
					isOther: '否',
					workDesc: '',
					workTime: '',
					workName: '',
					activityId: '',
					userId: this.$store.state.user.info.userId
				},
				rules: {
					name: [{
						required: true,
						message: '請輸入姓名',
						trigger: ['blur', 'change']
					}],
					idCard: [{
						required: true,
						message: '請輸入身份證字號',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[A-Z][12]\d{8}$/,
						message: '請輸入正確的台灣身份證字號格式（一個英文字母加9個數字）',
						trigger: ['blur', 'change']
					}],
					birthday: [{
						required: true,
						message: '請選擇出生年月日',
						trigger: ['blur', 'change']
					}],
					tel: [{
						required: true,
						message: '請輸入行動電話',
						trigger: ['blur', 'change']
					}, {
						pattern: /^09\d{8}$/,
						message: '請輸入正確的台灣手機號碼格式（09開頭的10位數字）',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '請輸入聯絡地址',
						trigger: ['blur', 'change']
					}],
					emali: [{
						required: true,
						message: '請輸入電子郵件',
						trigger: ['blur', 'change']
					}, {
						type: 'email',
						message: '請輸入正確的電子郵件格式',
						trigger: ['blur', 'change']
					}],
					emergencyContact: [{
						required: true,
						message: '請輸入緊急聯絡人姓名',
						trigger: ['blur', 'change']
					}],
					emergencyRelationship: [{
						required: true,
						message: '請輸入與緊急聯絡人的關係',
						trigger: ['blur', 'change']
					}],
					emergencyTel: [{
						required: true,
						message: '請輸入緊急聯絡人電話',
						trigger: ['blur', 'change']
					}, {
						pattern: /^09\d{8}$/,
						message: '請輸入正確的台灣手機號碼格式（09開頭的10位數字）',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							if (value === this.formData.tel) {
								callback(new Error('緊急聯絡人電話不可與報名者電話相同'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					}],
					eatingHabits: [{
						required: true,
						message: '請選擇飲食習慣',
						trigger: ['change']
					}],
					clothingSize: [{
						required: true,
						message: '請選擇衣服尺寸',
						trigger: ['change']
					}],
					workDesc: [{
						required: true,
						message: '請描述志工經歷',
						trigger: ['blur', 'change']
					}],
					workTime: [{
						required: true,
						message: '請選擇志工經歷年份',
						trigger: ['blur', 'change']
					}],
					workName: [{
						required: true,
						message: '請輸入志工經歷名稱',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(op) {
			this.formData.activityId = op.activityId
			this.getList(op)
		},
		methods: {
			appendToVideoUrl(content) {
				if (!content) return '';
				const screenWidth = window.innerWidth;
				const isMobile = screenWidth < 768;

				// ===================== 處理視頻 =====================
				const videoRegex = /(<iframe\s+[^>]*)(>)/g;
				// 移動端：使用rpx單位，寬680rpx
				// PC端：使用px單位，寬700px
				const videoStyle = isMobile ?
					' style="width: 680rpx;height: 400rpx;"' // 移動端視頻樣式
					:
					' style="width: 700px;height: 400px;"'; // PC端視頻樣式

				// 為視頻添加樣式
				content = content.replace(videoRegex, (match, p1, p2) => {
					return `${p1}${videoStyle}${p2}`;
				});

				// ===================== 處理圖片 =====================
				const imgRegex = /(<img\s+[^>]*)(\/?>)/g;
				// 移動端：最大寬度680rpx，寬度100%自適應
				// PC端：最大寬度700px，寬度100%自適應
				const imgStyle = isMobile ?
					' style="width: 100%;"' // 移動端圖片樣式
					:
					' style="width: 100%;"'; // PC端圖片樣式

				// 為圖片添加樣式
				content = content.replace(imgRegex, (match, p1, p2) => {
					// 如果圖片標籤已經有style屬性
					if (p1.includes('style="')) {
						// 在原有style基礎上添加寬度限制
						return p1.replace(
							'style="',
							`style="max-width: ${isMobile ? '680rpx' : '700px'};width: 100%;`
						) + p2;
					}
					// 如果沒有style屬性，直接添加新的style
					return `${p1}${imgStyle}${p2}`;
				});

				return content;
			},
			getList(e) {
				this.query.noticeType = e.type
				this.query.activityId = e.activityId
				getInformation(this.query).then(res => {
					if (res.rows[0]) {
						this.content = this.appendToVideoUrl(res.rows[0].noticeContent)
					}
				})
			},
			confirmPick(e) {
				this.formData.birthday = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showPicker = false
			},
			confirmworkPick(e) {
				this.formData.workTime = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showworkPicker = false
			},
			closePick() {
				this.showPicker = false
				this.showworkPicker = false
			},
			showDatePicker() {
				this.showPicker = true;
			},
			confirmDate(value) {
				this.formData.birthday = value;
				this.showPicker = false;
			},
			submitForm() {
				this.$refs.form.validate().then(valid => {
					if (valid) {
						uni.showLoading({
							title: '提交中'
						})
						addVolunteer(this.formData).then(res => {
							uni.hideLoading()
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
							// 重置表单数据
							this.formData = {
								name: '',
								idCard: '',
								birthday: '',
								tel: '',
								address: '',
								emali: '',
								emergencyContact: '',
								emergencyRelationship: '',
								emergencyTel: '',
								eatingHabits: '葷',
								clothingSize: 's',
								isOther: '否',
								workDesc: '',
								workTime: '',
								workName: '',
								activityId: this.formData.activityId,
								userId: this.$store.state.user.info.userId
							}
							// 重置表单验证
							this.$refs.form.resetFields()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 768px) {
		.form-container-container {
			padding: 8px 230px 0 230px;
		}

	}  
	@media screen and (max-width: 768px) {
		.form-container-container {
			padding: 0 20rpx;
		} 
	} 
	.volunteer-form {
		min-height: 100vh; 
		.form-container {
			background-color: #ffffff;
			padding: 30rpx 20rpx;
			margin: 20rpx;
			border-radius: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			max-width: 1086px;
			margin: auto;
			margin-top: 32rpx;

			.form-wrapper {
				max-width: 1086px;
				margin: 0 auto;
				padding: 24rpx;
			}

			@media screen and (max-width: 768px) {
				.form-wrapper {
					width: 100%;
				} 
			}

			/deep/ .u-form {
				.u-form-item {
					margin-bottom: 25rpx;

					&__body {
						padding: 10rpx 0;
					}

					&__label {
						font-size: 28rpx;
						padding: 10rpx 0;
						color: #333;

						&--required {
							&::before {
								margin-right: 8rpx;
								color: #0ABAB5;
							}
						}
					}

					&__message {
						font-size: 24rpx;
					}

					&--left {
						.u-form-item__body {
							flex-direction: column;
							align-items: flex-start;
						}

						.u-form-item__body__right {
							width: 100%;
							margin-top: 8rpx;
						}
					}
				}

				.u-input {
					font-size: 28rpx;

					&__input {
						height: 70rpx;
					}

					&--textarea {
						height: 160rpx;
					}
				}

				.u-radio {
					margin-right: 30rpx;

					&__label {
						font-size: 28rpx;
					}

					&__icon-wrap {
						&--checked {
							background-color: #0ABAB5 !important;
							border-color: #0ABAB5 !important;
						}
					}
				}

				.date-picker-wrapper {
					width: 100%;

					.u-input {
						&__input {
							height: 70rpx;
						}
					}
				}
			}
		}

		.submit-btn {
			margin: 40rpx auto;
			max-width: 1086px;
			padding: 0 30rpx;

			/deep/ .u-button {
				height: 80rpx;
				font-size: 32rpx;
				border-radius: 40rpx;
				background-color: #0ABAB5 !important;
				border-color: #0ABAB5 !important;

				&:active {
					background-color: #09a9a4 !important;
					border-color: #09a9a4 !important;
				}
			}

			@media screen and (max-width: 768px) {
				margin: 40rpx 30rpx;
			}
		}
	}

	// 適配iPhone底部安全區
	.safe-area-inset-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.parse {
		display: flex;
		justify-content: center;
		text-align: center;
		padding: 24rpx;
		max-width: 2400rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.radio-group {
		display: flex;
		flex-wrap: wrap;
		gap: 32rpx;

		.radio-item {
			margin-right: 30rpx;
			margin-bottom: 16rpx;

			&__label {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	::v-deep .u-radio-group--row {
		flex-wrap: wrap;
		gap: 10px;
	}

	// 修改日期選擇器主題色
	::v-deep .u-toolbar__wrapper__confirm {
		color: #0ABAB5 !important;
	} 
	::v-deep .u-radio__icon-wrap--circle {
		background-color: #0ABAB5 !important;
		border-color: #0ABAB5 !important;
	}
</style>